<template>
  <div class="relative">
    <page-loading></page-loading>
    <os-switch :item="pages[1].fields[0]" v-model='dmz_enabled'></os-switch>
    <os-input :item="pages[1].fields[1]" v-model="dmz_ip"></os-input>
    <div class="value alone-right">
      <div class="btn btn-blue" @click="set_dmz">{{$t('btn.save')}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      pages: this.$t('advanced.pages'),
      dmz_enabled: '',
      dmz_ip: '',
    }
  },
  methods: {
    get_dmz() {
      this.$req.get('/webapi?op=get_dmz').then(res => {
        console.log(res)
        const { enabled, ipaddr, } = res
        this.dmz_enabled = enabled
        this.dmz_ip = ipaddr
      })
    },
    set_dmz() {
      if(this.dmz_enabled && !this.isValidIP(this.dmz_ip)) {
        return
      }
      const params = {
        enabled: this.dmz_enabled,
        ipaddr: this.dmz_ip,
      }
      console.log(params)
      this.proxy_req("get", "/webapi?op=set_dmz", params, res=> {
        if(res.code!="1"){
          return
        }
        this.get_dmz()
      }, true, )
    },
  },
  created(){
    this.$bus.emit('changeTab', 1)
    this.get_dmz()
  },
  deactivated() {
    console.log('deactivated', this.$route.meta)
    this.$route.meta.refresh = false
  },
  activated() {
    // 同步二级路由
    this.$bus.emit('changeTab', 1)
  },
}
</script>

<style lang="scss" scoped>

</style>
